<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Examples of Auto Layouts - For more info visit: www.elasticss.com</title>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" media="all" href="../production/elastic.css" />
		<script src="../jquery.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<script src="../library/js/elastic.js" type="text/javascript" language="javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" media="all" href="images&css/css_for_demo_files.css" />	
	</head>
	<body>
		<div class="header-demo">
			<a href="http://elasticss.com"><img src="images&css/demo_header.png" /></a>
		</div>
		
		<div class="unit position-body">
			First element on body section
		</div>
		<div class="unit position-body">
			Second element on body section
		</div>
		<div class="unit position-body">
			Third element on body section
		</div>
		<div class="unit position-body">
			Fourth element on body section
		</div>
		<div class="unit position-header">
			Header content with the main page title
		</div>
		<div class="unit columns position-footer">
			<div class="column">footer content</div>
			<div class="column">footer content</div>
			<div class="column">footer content</div>
		</div>
		<div class="unit position-sidebar">
			Side bar for navigation and secondary content of the page
		</div>
		<div class="unit horizontal-center" style="width:950px;">
			<h2>Result when using elastic layouts</h2>
			<p>
			    Elastic automatic layouts provides an implementation(not copy) of the ideas behind css layouts.
			    This module can organize content inside a layout markup using only css classes. Check the original structure
			    of this page bellow and this is the result that you obtain.
			</p>
			<div class="display header"></div>
			<div class="columns layout same-height">
				<div class="column elastic display body"></div>
				<div class="column fixed display sidebar" style="width:300px;"></div>
			</div>
			<div class="display footer"></div>
		</div>
		
		<div class="unit horizontal-center" style="width:950px;">
	       <h2>Original structure of the page</h2>
           <pre>
    &lt;div class=&quot;unit position-body&quot;&gt;
      First element on body section
    &lt;/div&gt;
    &lt;div class=&quot;unit position-body&quot;&gt;
      Second element on body section
    &lt;/div&gt;
    &lt;div class=&quot;unit position-body&quot;&gt;
      Third element on body section
    &lt;/div&gt;
    &lt;div class=&quot;unit position-body&quot;&gt;
      Fourth element on body section
    &lt;/div&gt;
    &lt;div class=&quot;unit position-header&quot;&gt;
      Header content with the main page title
    &lt;/div&gt;
    &lt;div class=&quot;unit columns position-footer&quot;&gt;
      &lt;div class=&quot;column&quot;&gt;footer content&lt;/div&gt;
      &lt;div class=&quot;column&quot;&gt;footer content&lt;/div&gt;
      &lt;div class=&quot;column&quot;&gt;footer content&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;unit position-sidebar&quot;&gt;
      Side bar for navigation and secondary content of the page
    &lt;/div&gt;

    &lt;div class=&quot;unit horizontal-center&quot; style=&quot;width:950px;&quot;&gt;
      &lt;div class=&quot;display header&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;columns layout&quot;&gt;
          &lt;div class=&quot;column elastic display body&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;column fixed display sidebar&quot; style=&quot;width:300px;&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;display footer&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
           </pre>
	    </div>
	</body>
</html>
